<template>
  <div class="function_box">
    <div class="function_container">
      <div class="bread">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/a1/a2' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/teachingreform' }"
            >成果展示</el-breadcrumb-item
          >
          <el-breadcrumb-item>教学成果</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="menu1"><span style="font-family:'宋体">成果展示</span></div>
      <div class="menu2">
        <span style="font-family:'宋体" @click="toachievements">教学改革</span>
      </div>
      <div class="menu3">
        <span style="font-family:'宋体" @click="toTeachingachievements"
          >教学成果</span
        >
      </div>
      <div class="menu4">
        <span style="font-family:'宋体" @click="tostudentachievement"
          >学生成果</span
        >
      </div>
      <!-- 实验室介绍模块 -->
      <div class="lab_box">
        <span style="font-family:'宋体">实验室介绍</span>
        <div class="lab_box_blue"></div>
        <div class="lab_box_orange"></div>
        <div class="lab_box_more"><span @click="tolab">MORE +</span></div>
        <div class="lab1">
          <!-- 内容列表 -->
          <el-table
            :data="list1"
            :border="false"
            :stripe="false"
            max-height="380px"
            :row-style="{ height: '63px' }"
            size="max"
            :show-header="false"
            @row-click="openlabDetails"
          >
            <el-table-column
              v-if="showColumns1.find((i) => i.label == '标题').show"
              label="标题"
              prop="title"
              width="210"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 实验室平台模块 -->
      <div class="LaboratoryPlatform_box">
        <span style="font-family:'宋体">实验室平台</span>
        <div class="LaboratoryPlatform_box_blue"></div>
        <div class="LaboratoryPlatform_box_orange"></div>
        <div class="m1" @click="img_pat">
          <img
            src="../../../assets/PAT测评系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>PAT测评系统</span>
        </div>
        <div class="m2" @click="img_tiis">
          <img
            src="../../../assets/教学信息综合管理.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>教学信息综合管理</span>
        </div>
        <div class="m3" @click="img_search">
          <img
            src="../../../assets/上机查询系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>上机查询系统</span>
        </div>
        <div class="m4" @click="img_application">
          <img
            src="../../../assets/资源申请.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>资源申请</span>
        </div>
        <div class="m5" @click="img_serve">
          <img
            src="../../../assets/设备管理.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>设备管理</span>
        </div>
        <div class="m6" @click="img_aoa">
          <img
            src="../../../assets/AOA评测系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>AOA评测系统</span>
        </div>
        <div class="m7" @click="img_sql">
          <img
            src="../../../assets/SQL判题系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>SQL判题系统</span>
        </div>
        <div class="m8" @click="img_check">
          <img
            src="../../../assets/格式检查系统.png"
            alt=""
            width="70px"
            height="70px"
          />
          <span>格式检查系统</span>
        </div>
      </div>
      <!-- 详情模块 -->
      <div class="allnews">
        <span style="font-family:'宋体">教学成果</span>
        <div class="allnews_blue"></div>
        <div class="allnews_orange"></div>
        <div class="img2_box">
          <!-- 内容列表 -->
          <el-table
            :data="list"
            :border="false"
            :stripe="false"
            max-height="800px"
            size="max"
            width="950px"
            :show-header="false"
            @row-click="openachDetails"
          >
            <el-table-column
              v-if="showColumns.find((i) => i.label == '标题').show"
              label="标题"
              prop="title"
              width="600px"
              :show-overflow-tooltip="false"
            ></el-table-column>
            <el-table-column
              v-if="showColumns.find((i) => i.label == '修改时间').show"
              label="修改时间"
              prop="modifyTime"
              width="100px"
              ><template slot-scope="scope">
                {{ scope.row.createTime.substring(0, 10) }}
              </template></el-table-column
            >
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      query: {
        topicId: 12,
        title: "",
        pageNum: 1,
        pageSize: 20,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "修改时间", show: true },
      ],
      query1: {
        topicId: 10,
        pageNum: 1,
        pageSize: 6,
      },
      // 内容列表
      list1: [],
      // 内容总条数
      total1: 0,
      // 初始化显示字段
      showColumns1: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
      //这是登录表单的数据绑定对象
    };
  },
  created() {
    this.getList1();
    this.getList();
  },
  methods: {
    tohosthome() {
      this.$router.push("/hosthome");
    },
    toachievements() {
      this.$router.push("/teachingreform");
    },
    toTeachingachievements() {
      this.$router.push("/teachingachievements");
    },
    tostudentachievement() {
      this.$router.push("/studentachievement");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    openlabDetails(row) {
      this.$router.push({ name: "labdetail", params: { row: row } });
    },
    openachDetails(row) {
      this.$router.push({ name: "achdetail", params: { row: row } });
    },
    // 实验室介绍
    img_pat() {
      window.location.href = "http://pintia.cn";
    },
    img_aoa() {
      window.location.href = "http://10.66.48.251/";
    },
    img_tiis() {},
    img_search() {
      window.location.href = "http://10.66.59.200:88/release/building.html";
    },
    img_serve() {
      window.location.href = "ftp://10.66.28.222:2007";
    },
    img_sql() {
      window.location.href = "ftp://10.66.28.222:2007";
    },
    img_check() {
      window.location.href = "http://10.66.48.20";
    },
    img_application() {
      this.$router.push("/applications");
    },
    getList1() {
      this.$http.post("/v1/api/newses/page", this.query1).then((res) => {
        if (res.data.code == 0) {
          this.list1 = res.data.data.list;
          this.total1 = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
// 主体功能
.function_box {
  width: 1920px;
  // height: 1750px;
  height: 1700px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 1003px;
  transform: translate(-50%, -50%);
}
//主体区域背景布局颜色
.function_container {
  // background-color: #c0e7f3;
  // background-color: rgb(255, 255, 255);
  height: 100%;
}

.bread {
  // background-color: rgb(163, 19, 19);
  width: 1000px;
  height: 60px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
  .el-breadcrumb {
    // margin-bottom: 20px;
    padding-left: 10px;
    padding-top: 20px;
    font-size: 15px;
  }
  // display: flex;
  // margin: 5px;
}
.menu1 {
  width: 250px;
  height: 60px;
  background-color: #2179c2;
  position: absolute;
  left: 580px;
  top: 90px;
  transform: translate(-50%, -50%);
  box-shadow: 0.2px 0.2px 1px #000;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    color: #fff;
    font-size: 18px;
  }
}
.menu2 {
  width: 250px;
  height: 60px;
  // background-color: rgb(26, 53, 141);
  position: absolute;
  left: 580px;
  top: 150px;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0.1px 1px #000;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 20px;

    padding-left: 15px;
    font-size: 10px;
  }
}
.menu3 {
  width: 250px;
  height: 60px;
  // background-color: rgb(4, 163, 89);
  position: absolute;
  left: 580px;
  top: 210px;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0.1px 1px #000;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 20px;
    color: #90a3c2;
    padding-left: 15px;
    font-size: 10px;
  }
}
.menu4 {
  width: 250px;
  height: 60px;
  // background-color: rgb(4, 163, 89);
  position: absolute;
  left: 580px;
  top: 270px;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0.1px 1px #000;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 20px;
    padding-left: 15px;

    font-size: 10px;
  }
}
// 实验室介绍模块
.lab_box {
  width: 250px;
  height: 440px;
  background-color: #fff;
  position: absolute;
  left: 580px;
  top: 540px;
  transform: translate(-50%, -50%);
  box-shadow: 0.01px 0.01px 1px #000;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.lab_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.lab_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.lab_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 210px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
//实验室平台模块
.LaboratoryPlatform_box {
  width: 250px;
  height: 440px;
  background-color: #fff;
  position: absolute;
  left: 580px;
  top: 995px;
  transform: translate(-50%, -50%);
  box-shadow: 0.01px 0.01px 1px #000;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
  > img {
    width: 70px;
    height: 70px;
  }
}
.LaboratoryPlatform_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.LaboratoryPlatform_box_blue {
  width: 230px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 125px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.LaboratoryPlatform_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 210px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
.m1 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m2 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 190px;
  top: 100px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: px;
    color: #000;
    font-size: 5px;
  }
}
.m3 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 190px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 5px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m4 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 190px;
  top: 190px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 20px;
    color: #000;
    font-size: 5px;
  }
}
.m5 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 280px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 6px;
  }
  > span {
    display: flex;
    padding-left: 18px;
    color: #000;
    font-size: 5px;
  }
}
.m6 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 190px;
  top: 280px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m7 {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 60px;
  top: 370px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
.m8 {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 190px;
  top: 370px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > img {
    display: flex;
    padding-left: 10px;
  }
  > span {
    display: flex;
    padding-left: 10px;
    color: #000;
    font-size: 5px;
  }
}
// 详情模块
.allnews {
  width: 750px;
  height: 1155px;
  background-color: #fff;
  position: absolute;
  left: 1095px;
  top: 638px;
  transform: translate(-50%, -50%);
  box-shadow: 0.01px 0.01px 1px #000;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.allnews_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 49px;
  transform: translate(-50%, -50%);
}
.allnews_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 50px;
  transform: translate(-50%, -50%);
}

.img2_box {
  width: 700px;
  height: 180px;
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  left: 370px;
  top: 150px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.lab1 {
  width: 210px;
  height: 100px;
  border-radius: 2px;
  position: absolute;
  left: 5px;
  top: 40px;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
  /deep/.el-table::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  /deep/ .el-table td,
  /deep/ .el-table th.is-leaf {
    border-bottom: none;
  }

  /deep/ .el-table::before {
    height: 0;
  }
}
</style>
